<template>
  <div class="model-tree-detail">
    <ProPanel :groups="groups" :data="data" />
  </div>
</template>

<script setup lang="ts">
import ProPanel from '@/components/pro-panel/index.vue';

interface IProps {
  detail: any;
}

const props = withDefaults(defineProps<IProps>(), {});
const data = ref<any>({});

const groups = computed(() => {
  const detail: any = {};
  const groups =
    props.detail.map((el: any) => ({
      title: el.catgyName,
      key: el.catgyName,
      collapsed: false,
      columns: el.list.map((item: any) => {
        detail[item.propName] = item.propValue;
        return {
          label: item.propName,
          prop: item.propName,
          type: 'input',
        };
      }),
    })) ?? [];
  data.value = detail;
  return groups;
});
</script>

<style lang="less" scoped>
.model-tree-detail {
  background: #303030;
  width: 300px;
  padding: 8px;
  overflow: auto;
  max-height: calc(100% - 300px);

  :deep(.el-form-item) {
    margin-bottom: 18px;
  }
}
</style>
